<template>
  <el-dialog v-model="open" :close-on-click-modal="false" append-to-body title="添加对照" width="800px" @close="cancel">
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form :rules="rules" label-width="130px">
          <el-row :gutter="40">
            <el-col :span="24">
              <div class="ml50">
                <label>手术操作代码：</label><span>{{ clinicItemInfo.itemCode }}</span><br/>
                <label>手术操作名称：</label><span>{{ clinicItemInfo.itemName }}</span><br/>
                <!-- <label>手术操作等级：</label><span>{{
                    dictDataMap['operation_grade'][clinicItemInfo.operationScale] ?
                    dictDataMap['operation_grade'][clinicItemInfo.operationScale].label : ''
                }}</span> -->
              </div>
              <!--                            <el-form-item label="手术编码">-->
              <!--                                <el-input v-model="clinicItemInfo.itemCode" disabled/>-->
              <!--                            </el-form-item>-->
              <!--                            <el-form-item label="手术名称">-->
              <!--                                <el-input v-model="clinicItemInfo.itemName" disabled/>-->
              <!--                            </el-form-item>-->
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="130px">
          <el-row :gutter="40">
            <el-col :span="24">
              <el-form-item label="诊疗项目名称" prop="itemName">
                <el-input v-if="isShow" v-model="form.itemName"
                          @focus="isShowItemNameFocus()">
                </el-input>
                <automatic-completion v-else ref="itemAutomatic" :dict-array="dictArray"
                                      :table-body-list="tableBodyList" :table-head-list="tableHeadList"
                                      :title="itemTitle"
                                      @itemNameInput="itemNameInput" @rowClick="rowClick"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
    <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
// 项目自动补全组件
import AutomaticCompletion from "@/components/AutomaticCompletion/index.vue"
import {autoBuildQuery} from "@/api/base/clinicItemDict"
import {useDictStoreHook} from "@/store/modules/dict";
import {clinicTableHeadList, jsonStrInObj} from "@/utils/autoComplete"

const dictStore = useDictStoreHook()
const emits = defineEmits(["selectClinicList", "saveOperaControl"])
const formRef = ref()
const itemAutomatic = ref()
const dictDataMap = ref(dictStore.isTypeGetData('bill_item_class_dict', 'spec_unit'))
const open = ref(false)
// 诊疗项目信息
const clinicItemInfo = ref<any>({})
const form = ref<any>({
  amount: 1,
  subTotal: 0.00
})
// 诊疗项目下拉框
const billItemList = ref<any>([])
// 已对照项目
const checkedData = ref<any>([])
const rules = ref({
  // itemName: [
  //   {required: true, message: "项目名称不能为空", trigger: "blur"}
  // ],
  amount: [
    {required: true, message: "项目数量不能为空", trigger: "blur"}
  ],
})
// 项目选择自动补全表格表头
const tableHeadList = ref(jsonStrInObj(clinicTableHeadList))
// 项目选择自动补全表格数据
const tableBodyList = ref([])
// 项目选择自动补全字典数组
const dictArray = ref(['bill_item_class_dict'])
// 检查项目选择自动补全窗体名称
const itemTitle = ref('手术与诊疗项目对照')

/** 取消按钮 */
function cancel() {
  closePopover()
  open.value = false;
  emits("selectClinicList")
  reset();
}

/** 表单重置 */
function reset() {
  form.value.itemName = undefined
  form.value.priceId = undefined
  form.value.itemSpec = undefined
  form.value.units = undefined
  form.value.price = undefined
  form.value.subTotal = undefined
  form.value.clinicItemId = undefined
}

/** 打开弹出框 */
function addControlDialogShow(row) {
  open.value = true
  clinicItemInfo.value = row
  disposeAddBillItemList()
  debugger
  form.value = {
    orgId: row.orgId,
    operationDictId: row.operationDictId,
    itemName: row.itemName,
  }

}

/** 提交 */
function submitForm() {
  (formRef.value as any).validate(valid => {
    if (valid) {
      isShow.value = true
      form.value.itemName = ""
      emits("saveOperaControl", form)
    }
  })
}

/** 处理新增页面诊疗项目分类数据 */
function disposeAddBillItemList() {
  billItemList.value = []
  dictDataMap.value['bill_item_class_dict'].forEach(item => {
    let billItem: any = {}
    if (item.dictValue === 'A' || item.dictValue === 'B') {
      billItem.disabled = true
    }
    billItem.dictValue = item.dictValue
    billItem.dictLabel = item.dictLabel
    billItemList.value.push(billItem)
  })
}

function itemNameInput(itemName) {
  form.value.itemInfo = itemName
  getExamListClinicItemDict()
}

/** 自动补全后台查询 */
function getExamListClinicItemDict() {
  // if (form.value.clinicId) {
  let autoForm: any = {}
  autoForm.notInSelect = ['A', 'B', 'C', 'D', 'E', 'G', 'H', 'I', 'K', 'L', 'N']
  // 是否过滤已存在的项目标记
  autoForm.isFiltrationContrastExist = true
  autoForm.orgId = form.value.orgId
  autoForm.itemInfo = form.value.itemInfo
  autoBuildQuery(autoForm).then(res => {
    tableBodyList.value = res.data
    // 打开自动补全弹出框
    itemAutomatic.value.init()
  })
  // } else {
  //     tableBodyList.value = []
  // }
}

function rowClick(row) {
  itemAutomatic.value.closePopover();
  isShow.value = true
  form.value.clinicId = row.clinicItemId
  form.value.itemName = row.itemName
  tableBodyList.value = []
}

/**
 * 自动补全上边input获得焦点事件
 * @param _index
 * @param row
 */
let isShow = ref(true);

function isShowItemNameFocus() {
  isShow.value = false
  nextTick(() => {
    itemAutomatic.value.init()
    itemAutomatic.value.setItemName(form.value.itemName)
    itemAutomatic.value.focusInput()
  })
}


/** 项目选择关闭事件 */
function closePopover() {
  tableBodyList.value = []
}

defineExpose({
  addControlDialogShow
})
</script>
<script lang="ts">
export default {
  name: "addControlDialog"
  // dicts: ['bill_item_class_dict', 'spec_unit', 'operation_grade'],
}
</script>

<style scoped></style>
